{{!
  Marked up with guidance from:
  https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
  https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/
  https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/examples/menu-button-links/
  https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/examples/menu-button-actions-active-descendant/
}}
<FloatingUI
  @renderOut={{@renderOut}}
  @placement={{@placement}}
  @offset={{@offset}}
  @disableClose={{@disableClose}}
  @matchAnchorWidth={{@matchAnchorWidth}}
  class="x-dropdown-list
    {{unless (eq @placement null) 'hermes-popover'}}
    {{if this.inputIsShown 'has-input'}}"
  data-test-x-dropdown-list-content
  {{will-destroy this.onDestroy}}
  ...attributes
>
  <:anchor as |f|>
    {{yield
      (hash
        ToggleButton=(component
          "x/dropdown-list/toggle-button"
          contentIsShown=f.contentIsShown
          registerAnchor=f.registerAnchor
          toggleContent=f.toggleContent
          onTriggerKeydown=(fn
            this.onTriggerKeydown f.contentIsShown f.showContent
          )
          color=(or @color "secondary")
          disabled=@disabled
          ariaControls=(concat
            "x-dropdown-list-"
            (if this.inputIsShown "container" "items")
            "-"
            f.contentID
          )
          text=@label
        )
        ToggleAction=(component
          "x/dropdown-list/toggle-action"
          contentIsShown=f.contentIsShown
          registerAnchor=f.registerAnchor
          onTriggerKeydown=(fn
            this.onTriggerKeydown f.contentIsShown f.showContent
          )
          toggleContent=f.toggleContent
          disabled=@disabled
          ariaControls=(concat
            "x-dropdown-list-"
            (if this.inputIsShown "container" "items")
            "-"
            f.contentID
          )
        )
        ToggleSelect=(component
          "x/dropdown-list/toggle-select"
          contentIsShown=f.contentIsShown
          registerAnchor=f.registerAnchor
          onTriggerKeydown=(fn
            this.onTriggerKeydown f.contentIsShown f.showContent
          )
          toggleContent=f.toggleContent
          disabled=@disabled
          ariaControls=(concat
            "x-dropdown-list-"
            (if this.inputIsShown "container" "items")
            "-"
            f.contentID
          )
        )
        ariaControls=(concat
          "x-dropdown-list-"
          (if this.inputIsShown "container" "items")
          "-"
          f.contentID
        )
        resetFocusedItemIndex=this.resetFocusedItemIndex
        scheduleAssignMenuItemIDs=(perform this.scheduleAssignMenuItemIDs)
        registerAnchor=f.registerAnchor
        contentIsShown=f.contentIsShown
        selected=@selected
        toggleContent=f.toggleContent
        onTriggerKeydown=(fn
          this.onTriggerKeydown f.contentIsShown f.showContent
        )
        focusedItemIndex=this.focusedItemIndex
        hideContent=f.hideContent
        showContent=f.showContent
      )
      to="anchor"
    }}
  </:anchor>
  <:content as |f|>
    <div
      {{will-destroy this.resetFilteredItems}}
      {{dismissible dismiss=f.hideContent related=f.anchor}}
      id="x-dropdown-list-container-{{f.contentID}}"
      class="x-dropdown-list-container"
      role={{if this.inputIsShown "combobox"}}
    >
      {{#if @isLoading}}
        {{#if (has-block "loading")}}
          <div class="w-full" data-test-x-dropdown-list-loading-block>
            {{yield to="loading"}}
          </div>
        {{else}}
          <div
            data-test-x-dropdown-list-default-loading-block
            class="x-dropdown-list-default-loading-container"
          >
            <FlightIcon @name="loading" />
          </div>
        {{/if}}
      {{else}}
        <div
          data-test-x-dropdown-list-loaded-content
          class="flex flex-col overflow-hidden"
          {{did-insert this.didInsertContent}}
        >
          {{#if this.inputIsShown}}
            <div class="x-dropdown-list-input-container">
              <Hds::Form::TextInput::Base
                data-test-x-dropdown-list-input
                {{did-insert this.registerAndFocusInput}}
                {{on "input" this.onInput}}
                {{on "focusin" this.maybeEnableKeyboardNav}}
                {{on "focusout" this.disableKeyboardNav}}
                @value={{this.query}}
                @type="search"
                placeholder="Filter..."
                aria-controls="x-dropdown-list-{{f.contentID}}"
                aria-activedescendant={{unless
                  (eq this.focusedItemIndex -1)
                  (concat "x-dropdown-list-item-" this.focusedItemIndex)
                }}
              />
            </div>
          {{/if}}
          <div
            {{did-insert this.registerScrollContainer}}
            class="x-dropdown-list-scroll-container"
          >
            {{#if (has-block "header")}}
              {{yield to="header"}}
            {{/if}}
            <X::DropdownList::Items
              @contentID={{f.contentID}}
              @query={{this.query}}
              @items={{@items}}
              @shownItems={{this.shownItems}}
              @selected={{@selected}}
              @focusedItemIndex={{this.focusedItemIndex}}
              @inputIsShown={{this.inputIsShown}}
              @listIsOrdered={{@listIsOrdered}}
              @listItemRole={{this.listItemRole}}
              @onInput={{this.onInput}}
              @onItemClick={{@onItemClick}}
              @registerScrollContainer={{this.registerScrollContainer}}
              @setFocusedItemIndex={{this.setFocusedItemIndex}}
              @hideContent={{f.hideContent}}
              @scrollContainer={{this.scrollContainer}}
              @listIsShown={{@listIsShown}}
              @keyboardNavIsEnabled={{this.keyboardNavIsEnabled}}
            >
              <:no-matches>
                {{#if (has-block "no-matches")}}
                  {{yield to="no-matches"}}
                {{else}}
                  <div class="x-dropdown-list-default-empty-state">
                    No matches
                  </div>
                {{/if}}
              </:no-matches>
              <:item as |i|>
                {{yield i to="item"}}
              </:item>
            </X::DropdownList::Items>

            {{#if (has-block "footer")}}
              {{yield to="footer"}}
            {{/if}}
          </div>
        </div>
      {{/if}}
    </div>
  </:content>
</FloatingUI>
